<template>
	<ul class="Icons">

	<li class="Icons2" v-for="item in picture1" :key="item.id">
		<router-link to="/">
			<img :src="item.url" />
			<p>{{item.title}}</p>
		</router-link>
	</li>
		
	</ul>
	
</template>

<script>
	/* public目录下所有的文件都是直接读取的，asset目录下的图片会被压缩处理同时动态加载的时候需要通过require() */
	export default{
		name:'Icons',
		props:['propsi'],
		data(){
			return{
			picture1:[],
			}
		},
		watch:{
			propsi(){
				this.picture1 = this.propsi
			}
		}
		
	}
</script>

<style scoped>
	*{
		text-decoration: none;
	}
	.Icons{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		padding: 0.6rem 0 0;
		border-bottom: 0.03rem solid gainsboro;
	}
	.Icons2{
		width: 25%;
		float: left;
		text-align: center;
	}
	.Icons2 img{
		width: 1.2rem;
		height: 1.2rem;
	}
	.Icons li p{
		color: black;
		padding-top: 0.15rem;
		padding-bottom: 0.5rem;
	}

</style>
